<template>
    <div class="newinfo-container">
        <!--大标题-->
        <h3 class="title">{{newsinfo.title}}</h3>
        <!--子标题-->
        <p class="subtitle">
            <span>发表时间:{{newsinfo.addtime}}</span>
            <span>点击:{{newsinfo.click}}次</span>
        </p>
        <hr>
        <!--内容区-->
        <div class="content" v-html="newsinfo.content"></div>

        <!--评论组件区域-->
        <comment-box :id="this.id"></comment-box>
    </div>
</template>
<script>
    import {Toast} from 'mint-ui';

    //导入 评论子组件
    import comment from '../subcomponents/comment.vue'

    export default{
        data(){
            return{
                id:this.$route.params.id, //将url地址中传递过来的id值，挂载到data上，方便使用
                newsinfo:{} //新闻对象
            };
        },
        created(){
            this.getNewInfo();
        },
        methods:{
            getNewInfo(){  //获取新闻详情
                this.$http.get("newinfo.php/" + this.id).then(result =>{
                    // console.log(result.body);
                    if(result.body.code === 0){
                        //成功
                        this.newsinfo = result.body.data;
                    }else{
                        //失败
                        Toast('获取详情失败')
                    }
                })
            }   
        },
        //用来注册子组件节点
        components:{    
            "comment-box" : comment
        }
    };
</script>
<style lang="scss" scoped>
    .newinfo-container{
        padding:0 4px;
        .title{
            font-size:16px;
            text-align:center;
            margin:15px 0;
            color:red;
        }
        .subtitle{
            font-size:13px;
            color:#226aff;
            display: flex;
            justify-content: space-between;
        }
        .content{}
    }
</style>